<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>Insert title here</title>
	<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
	<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
		var show = function(result) {
			var output = '<div>';
			output += 'keyword: ' + result.keyword;
			output += ', content: ' + result.content;
			output += ', location: ' + result.gridx + ', ' + result.gridy;
			output += '</div>';
			
			return output;
		};
	
		$(document).ready(function() {
			var socket = io.connect();
			
			socket.on('search', function(result) {
				// keyword result
				result.keyword.forEach(function(cells) {
					$('#keyword').append(show(cells));
				});
				
				// content result
				result.content.forEach(function(cells) {
					$('#content').append(show(cells));
				});
				
				// nick result
				result.nick.forEach(function(cells) {
					$('#nick').append(show(cells));
				});
				
				// log
				$('#log').append(JSON.stringify(result));
			});
			
			$('#send').click(function() {
				socket.emit('search', $('#search').val());	
			});
		});
	</script>
</head>
<body>
	<input type='text' id='search'><button id='send'>SEARCH</button>

	<div id='result'>
		<h1>keyword search result</h1>
			<div id='keyword'></div>	
		<h1>content search result</h1>
			<div id='content'></div>
		<h1>nick search result</h1>
			<div id='nick'></div>
	</div>
	
	<h1>LOG</h1>
	<div id='log'></div>
</body>
</html>